<template>
    <div class="loading-container" v-show="visible">
        <div class="loading-wrapper">
            <div class="loading-img">
                <img src="../../assets/Loading.gif">
            </div>
        </div>  
    </div>
</template>

<script>
export default {
    data(){
        return{
            visible:false,
            count:0,
        }
    },
    methods:{
        addCount(){
            this.visible=true,
            this.count++
        },
        minusCount(){
            this.count--
            if(this.count==0){
                this.visible=false
            }
        }
    }
}
</script>

<style scoped>
.loading-container{
    width:100%;
    height:100%;
    position:fixed;
    left:0px;
    top:0px;
    z-index:999;
}
.loading-wrapper{
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.5);
    display:inline-flex;
    justify-content: center;
    align-items: center;
}
.loading-img img{
    width:2rem;
    height:2rem;
}
</style>